import * as L from 'leaflet/dist/leaflet.js';
import {ref} from "vue";
import {PopupOption} from "./types"
import { usePopup } from "./popup"

export type colorType = "blue" | "red" //图标颜色
export type iconType = "building" | "device" | "monitor" | 'facilit'//图标类型   建筑 、设备和设施、摄像头

interface iconOptions {
  svg:string,
  options: object
}

// import moSvg from '/src/assets/'
// const monitorSvg = `<svg viewBox="0 0 1024 1024" width="50" height="50"><path d="M214.4 684.8H105.6v-137.6L0 528v441.6l105.6-35.2v-153.6h169.6l92.8-124.8-121.6-64-32 92.8z m550.4 28.8l246.4-156.8-768-505.6H153.6L32 243.2v64l675.2 409.6h57.6v-3.2z m-92.8 32L89.6 368l-60.8 64L704 841.6h60.8l32-32 32-92.8s-89.6 64-92.8 64c-35.2-22.4-64-35.2-64-35.2z" fill="#ffffff"></path></svg>`
const monitorSvg = '/src/assets/map/moniter.svg'
/*三角锥告警*/
/*  <ellipse cx="90.7" cy="194.79" rx="90" ry="44" fill="url('#myGradient')">
  </ellipse>*/
const alarmSvg = `<svg viewBox="0 0 212 224.79"><defs><linearGradient id="linear_33" x1="18.02" y1="43.86" x2="163.38" y2="43.86" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff1b1b" /><stop offset="0.49" stop-color="#ff6767" /><stop offset="1" stop-color="#ff1b1b" /></linearGradient><linearGradient id="linear_26" x1="54.36" y1="194.79" x2="54.36" y2="43.86" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff1b1b" /><stop offset="0.5" stop-color="#ff6767" stop-opacity="0.3" /><stop offset="1" stop-color="#ff1b1b" /></linearGradient><linearGradient id="linear_26-2" x1="127.04" y1="194.79" x2="127.04" y2="43.86" xlink:href="#linear_26" /><radialGradient id="myGradient2" cx="50%" cy="50%" r="50%"><stop offset="10%" stop-color="#00000000" stop-opacity="1"></stop><stop offset="80%" stop-color="#FF000096" stop-opacity="0.5"></stop><stop offset="90%" stop-color="#FF000096" stop-opacity="0.1"></stop></radialGradient><radialGradient id="myGradient"><stop offset="30%" stop-color="#00000000"/><stop offset="99%" stop-color="#ff000033"/></radialGradient></defs><g><g class="cls-2" opacity="0.6"><image class="cls-3" width="182" height="96"
                   xlink:href="" /><polygon class="cls-4" fill="url(#linear_33)"
                     points="90.7 14.62 18.02 43.86 90.7 73.09 163.38 43.86 90.7 14.62" /></g><polygon class="cls-5" opacity="0.6" fill="url(#linear_26)"
                   points="90.7 194.79 90.7 73.09 18.02 43.86 90.7 194.79" /><polygon class="cls-6" opacity="0.6" fill="url(#linear_26-2)"
                   points="90.7 194.79 90.7 73.09 163.38 43.86 90.7 194.79" /></g><ellipse cx="90.7" cy="194.79" rx="90" ry="44" fill="url('#myGradient2')"><animate attributeName="rx" values="0;90" dur="1.5s" begin="0s"
                   repeatCount="indefinite"></animate><animate attributeName="ry" values="0;44" dur="1.5s" begin="0s"
                   repeatCount="indefinite"></animate><animate attributeName="opacity" begin="0s" dur="1.5s" values="1;0.8;0.6;0.6;0"  repeatCount="indefinite"></animate></ellipse></svg>`

/*圆圈告警动画*/
const alarmCircleSvg = `<svg viewBox="0 0 120 100">
        <defs><radialGradient id="myGradient2" cx="50%" cy="50%" r="50%">
        <stop offset="10%" stop-color="#d1293100" stop-opacity="1"></stop>
        <stop offset="80%" stop-color="#d12931" stop-opacity="0.8"></stop>
        <stop offset="95%" stop-color="#d12931" stop-opacity="0.1"></stop>
        </radialGradient></defs>
        <ellipse cx="50" cy="50" rx="80" ry="45" fill="url('#myGradient2')">
          <animate attributeName="rx" values="0;80" dur="1.5s" begin="0s" repeatCount="indefinite"></animate>
          <animate attributeName="ry" values="0;45" dur="1.5s" begin="0s" repeatCount="indefinite"></animate>
          <animate attributeName="opacity" begin="0s" dur="1.5s" values="1;0.8;0.6;0.6;0.3;0"  repeatCount="indefinite"></animate>
        </ellipse>
      </svg>`

const fillRegex = new RegExp(/fill="#([0-9a-f]{3}|[0-9a-f]{6})"/i);
const fillRegexCurr = new RegExp(/fill="currentColor"/);
const svgRegex = new RegExp(/<svg.[\s\S]*?>/);

const replaceSvg = (str:string) => {
  return str.replace(svgRegex, '<svg viewBox="0 0 1024 1024" width="24" height="24">').replace(fillRegex, '').replace(fillRegexCurr, '')
}

export const useMarker = () => {
  const defaultSelectedColor = "blue"
  // 当前选中的marker
  const currentSelectedMarker = ref()
  //设置icon
  const getIcon = (icon, color) => {
    const options = {
      icon: icon,
      textColor: color,
      backgroundColor: 'transparent',
      // spin:true
    };
    return L.BeautifyIcon.icon(options)
  }

  const onMarkerSelect = async (marker:any, color:string) => {
    if (currentSelectedMarker.value) {
      currentSelectedMarker.value.setIcon(getIcon(currentSelectedMarker.value.options.icon.options.icon, defaultSelectedColor))
    }
    //修改当前选中的marker 为默认颜色
    const myIcon = getIcon(marker.options.icon.options.icon, color)
    marker.setIcon(myIcon)
    currentSelectedMarker.value = marker
  }

  /*设施设备svg图标*/
  const dfOptions = {
    iconSize: [60, 60],
    iconAnchor: [31, 83],
  }

  /*摄像头图标与设备设施一样*/
  const getMonitorIcon = (svgStr: string, colorType: colorType = "blue", popupOption?:PopupOption) => {
    return getDeviceFacilitIcon(monitorSvg, colorType)
  }

  const getDeviceFacilitIcon = (svgStr: string, colorType: colorType = "blue", popupOption?:PopupOption) => {

    // <circle cx="26.5" cy="26.5" r="25" stroke-miterlimit="10" fill="none" stroke="url(#linear_cir1_${colorType})" stroke-width="3"/>

    /**
     *  const svgRepStr = replaceSvg(svgStr)
     * const t = Math.ceil(Math.random() * 1000000)
     * <svg viewBox="0 0 25 25" class="mt-[26px] w-[20px] h-[20px] z-[1]">
          <defs>
              <g id="remote_${t}" fill="url(#icon_${colorType})">
                  ${svgRepStr}
              </g>
          </defs>
           <use href="#remote_${t}" x="1" y="0" width="21" height="21"/>
      </svg>
     *
     */
    const svg = `<div class="relative flex justify-center">
      <svg viewBox="0 0 53 72" width="72" height="72" class="absolute">
          <g>

            <circle cx="26.5" cy="32.5" r="22" fill="url(#linear_cir2_${colorType})"/>
            <circle cx="26.5" cy="32.5" r="18" fill="url(#linear_cir3_${colorType})"/>
             <path fill="url(#linear_path1-2_${colorType})"
                  d="M26.22,62l-3.73-6.45a.33.33,0,0,1,.28-.5h7.46a.33.33,0,0,1,.28.5L26.78,62A.32.32,0,0,1,26.22,62Z"/>
            <path stroke-miterlimit="10" fill="none" stroke="url(#linear_path1_${colorType})" stroke-width="4"
                  d="M26.32,70.87,16,55.37a.21.21,0,0,1,.18-.33H36.79a.21.21,0,0,1,.18.33L26.68,70.87A.21.21,0,0,1,26.32,70.87Z"/>
          </g>
      </svg>
      <img src="${svgStr}" class="!w-[26px] !h[26px] z-[201] absolute top-[20px]"/>
      </div>`

    return {
      svg,
      options : dfOptions
    }
  }

  /*建筑图标options*/
  const buildOptions = {
    iconSize: [60, 100],
    iconAnchor: [34, 100],
  }

  const buildMarkerOption = {
    red: {
      fill:'#4e1a24',
      stroke:'#d12931',
      react:`<g><rect x="37.58" y="60.06" fill="#d12931" width="1" height="73"/><g filter="url(#filter-red)"><defs><filter id="filter-red" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix><feGaussianBlur stdDeviation="6"></feGaussianBlur><feComposite in2="hardAlpha" operator="out"></feComposite><feColorMatrix type="matrix" values="0 0 0 0 0.9013157894736842 0 0 0 0 0.03190498369818356 0 0 0 0 0.03190498369818356 0 0 0 0.7911392405063292 0"></feColorMatrix><feBlend mode="normal" in2="BackgroundImageFix" result="effect0_dropShadow"></feBlend><feBlend mode="normal" in="SourceGraphic" in2="effect0_dropShadow" result="shape"></feBlend></filter></defs><rect x="20.08" y="19.98" width="36" height="36" rx="8"  shape-rendering="geometricPrecision" fill="#4e1a24" style="fill-rule:evenodd" stroke-miterlimit="10" stroke="#d12931" transform="translate(-15.7 38.05) rotate(-45)"/></g><ellipse fill="#d12931" cx="38.08" cy="132" rx="2.5" ry="1.5"/></g>`
    },
    blue: {
      fill:'#326DE423',
      stroke:'#4579E3',
      react:`<g><rect x="37.58" y="60.06" fill="#4579E3" width="1" height="73"/><g filter="url(#filter-blue)"><defs><filter id="filter-blue" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix><feGaussianBlur stdDeviation="6"></feGaussianBlur><feComposite in2="hardAlpha" operator="out"></feComposite><feColorMatrix type="matrix" values="0 0 0 0 0.1156555659059152 0 0 0 0 0.4822970035708741 0 0 0 0 0.9013157894736842 0 0 0 1 0"></feColorMatrix><feBlend mode="normal" in2="BackgroundImageFix" result="effect0_dropShadow"></feBlend><feBlend mode="normal" in="SourceGraphic" in2="effect0_dropShadow" result="shape"></feBlend></filter></defs><rect x="20.08" y="19.98" width="36" height="36" rx="8"  shape-rendering="geometricPrecision" fill="#326DE423" style="fill-rule:evenodd" stroke-miterlimit="10" stroke="#4579E3" transform="translate(-15.7 38.05) rotate(-45)"/></g><ellipse fill="#4579E3" cx="38.08" cy="132" rx="2.5" ry="1.5"/></g>`
    }
  }

  /*建筑icon*/
  const getBuildingIcon = (svgStr: string, colorType: colorType = "blue") => {
    const alarm = colorType === "red" ? alarmSvg: ''
    if(colorType == "red") {
      buildOptions.iconAnchor = [45, 100]
    }
    const t = Math.ceil(Math.random() * 1000000)
    const svg = `<div>
    <svg viewBox="0 0 76 160.67">
         <defs>
            <g id="remoteBuilding_${t}">
               <svg viewBox="0 0 1024 1024" width="24" height="24"><path fill="#FFFFFF" d="M512 68.191078c-171.531702 0-310.666552 139.133827-310.666552 310.666552 0 232.999658 310.666552 576.951291 310.666552 576.951291s310.666552-343.951633 310.666552-576.951291C822.665529 207.324906 683.531702 68.191078 512 68.191078zM512 489.809605c-61.245899 0-110.951975-49.706075-110.951975-110.951975S450.754101 267.904633 512 267.904633 622.951975 317.611731 622.951975 378.857631 573.245899 489.809605 512 489.809605z"></path></svg>
            </g>
            <g id="alarm_${t}">
               ${alarm}
            </g>
        </defs>
           ${buildMarkerOption[colorType].react}
         <use href="#remoteBuilding_${t}" x="26" y="26"/>
         <use href="#alarm_${t}" x="5.5" y="22"/>
      </svg>
</div>`
    return {
      svg, options:buildOptions
    }
  }

  const simpleBuildOptions = {
    iconSize: [60, 100],
    iconAnchor: [14, 60],
  }
  const getBuildingSimpleIcon = (svgStr: string, colorType: colorType = "blue", popupOption:PopupOption) => {
    const alarm = colorType === "red" ? alarmCircleSvg : ''
    // if (colorType == "red") {
    //   simpleBuildOptions.iconAnchor = [40, 100]
    // }
    const t = Math.ceil(Math.random() * 1000000)
    const bc = usePopup().createBuildingPopupContent(colorType, popupOption)


    const svg = `<div class=" flex justify-center items-center flex-col">
       <div class="relative top-[45px] right-[2px]">${bc}</div>
      <svg viewBox="0 0 76 160.67">
          <defs>
              <g id="alarm_${t}">
                 ${alarm}
              </g>
              <g id="alarm_circle_${t}">
                <path fill="url(#linear_path1-2_${colorType})"
                      d="M26.22,62l-3.73-6.45a.33.33,0,0,1,.28-.5h7.46a.33.33,0,0,1,.28.5L26.78,62A.32.32,0,0,1,26.22,62Z"/>
                <path stroke-miterlimit="10" fill="none" stroke="url(#linear_path1_${colorType})" stroke-width="4"
                      d="M26.32,70.87,16,55.37a.21.21,0,0,1,.18-.33H36.79a.21.21,0,0,1,.18.33L26.68,70.87A.21.21,0,0,1,26.32,70.87Z"/>
              </g>
          </defs>

            <use href="#alarm_circle_${t}" x="9" y="0"/>
            <use href="#alarm_${t}" x="4" y="-6"/>
        </svg>
    </div>`

    return {
      svg, options: simpleBuildOptions
    }
  }

  const funcMap = {
    "building": getBuildingSimpleIcon,
    "device": getDeviceFacilitIcon,
    "facilit": getDeviceFacilitIcon,
    "monitor":getMonitorIcon
  }
  const getSvgIcon = (svgStr: string, iconType: iconType, colorType: colorType = "blue", popupOption: PopupOption) => {

    return funcMap[iconType](svgStr, colorType, popupOption)
  }


  return {
    defaultSelectedColor,
    onMarkerSelect,
    getIcon,
    getSvgIcon
  }
}
